<template>
	<view>
		<view class="bgWhite">
			<view class="plr15">
				<view class="align-center  ptb15 justify-between bdbe">
					<view class="ft15 gray3"><text>{{$t('index').手机号}}</text></view>
					<view style="flex-basis: 75%;" class="align-center">
						<view class="align-center mr10" @click="navTo('/pages/address/areaCode')">
							<view class="mr5"><text>{{code}}</text></view>
							<image src="../../static/images/address/xiahei.png" mode="aspectFill"
								style="width: 14rpx;height: 8rpx;"></image>
						</view>
						<input type="number" :placeholder="$t('index').请输入手机号码" placeholder-class="ft15"
							placeholder-style="color: #BBBBBB;" v-model="userInfo.phone">
					</view>
				</view>
			</view>
			<view class="plr15">
				<view class="align-center  ptb15 justify-between bdbe">
					<view class="ft15 gray3" style="word-wrap:break-word;flex-basis: 25%;"><text>{{$t('set').验证码}}</text></view>
					<view style="flex-basis: 75%;" class="align-center justify-between">
						<input type="number" :placeholder="$t('login').请输入验证码" placeholder-class="ft15"
							placeholder-style="color: #BBBBBB;" v-model="captcha">
						<view style="word-wrap:break-word;flex-basis: 30%;"><text class="light" 
								@click="getCode()">{{ timeDown > 0 ? timeDown + 's' : $t('login').获取验证码}}</text></view>
					</view>
				</view>
			</view>
			<view class="plr15">
				<view class="align-center  ptb15 justify-between bdbe">
					<view class="ft15 gray3" style="word-wrap:break-word;flex-basis: 25%;"><text>{{$t('set').新密码}}</text></view>
					<view style="flex-basis: 75%;" class="align-center justify-between">
						<input class="uni-input-input" @input="passInput" :type="pas?'':'password'"
							:placeholder="$t('set').请输入6位数字密码" placeholder-class="ft15"
							placeholder-style="color: #BBBBBB;" v-model="password">
						<image v-if="pas" @click="openpas(0)" src="../../static/images/setPsaa/zyan.png"
							mode="aspectFill" style="width: 38rpx;height: 32rpx;"></image>
						<image v-else @click="openpas(0)" src="../../static/images/setPsaa/byan.png" mode="aspectFill"
							style="width: 38rpx;height: 32rpx;"></image>
					</view>
				</view>
			</view>
			<view class="plr15">
				<view class="align-center  ptb15 justify-between bdbe">
					<view class="ft15 gray3" style="word-wrap:break-word;flex-basis: 25%;"><text>{{$t('set').确认密码}}</text></view>
					<view style="flex-basis: 75%;" class="align-center justify-between">
						<input @input="confirmpassInput" class="uni-input-input" :type="conpas?'text':'password'"
							:placeholder="$t('set').请输入6位数字密码" placeholder-class="ft15"
							placeholder-style="color: #BBBBBB;" v-model="confirmpassword">
						<image v-if="conpas" @click="openpas(1)" src="../../static/images/setPsaa/zyan.png"
							mode="aspectFill" style="width: 38rpx;height: 32rpx;"></image>
						<image v-else @click="openpas(1)" src="../../static/images/setPsaa/byan.png" mode="aspectFill"
							style="width: 38rpx;height: 32rpx;"></image>
					</view>
				</view>
			</view>
		</view>
		<mix-button ref="confirmBtn" :text="$t('common').保存" @onConfirm="save()" marginTop="48rpx"></mix-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				password: '',
				captcha: '',
				confirmpassword: "",
				pas: false,
				conpas: false,
				timeDown: '',
				code: '+86'
			}
		},
		onLoad() {
			this.$store.dispatch('getuserInfo')
			uni.setNavigationBarTitle({
				title: this.$t('set').支付密码
			})
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		methods: {
			// 限制只能输入6位数字
			passInput(e) {
				const o = e.target
				const inputRule = /[^\d]/g       //数字的限制
				this.$nextTick(() => {
					this.password = o.value.replace(inputRule, '')
					if (this.password.length > 0) {      //限制长度
						this.password = this.password.slice(0, 6)
					}
				})
			},
			confirmpassInput(e) {
				const o = e.target
				const inputRule = /[^\d]/g
				this.$nextTick(() => {
					this.confirmpassword = o.value.replace(inputRule, '')
					if (this.confirmpassword.length > 0) {
						this.confirmpassword = this.confirmpassword.slice(0, 6)
					}
				})
			},
			chooseCode(item) {
				console.log(item)
				this.code = item.code
			},
			//获取验证码
			getCode() {
				if (this.timeDown > 0) {
					return;
				}
				this.$utils.throttle(() => {
					this.$api.smsSend({
						phone: this.userInfo.phone,
						event: 'paypwd',
						area_code:this.code
					}).then((res) => {
						if (res && res.code == 1) {
							this.$utils.msg(res.msg);
							this.countDown(60);
						}
					})
				}, 2000)
			},
			//倒计时
			countDown(timer) {
				timer--;
				this.timeDown = timer;
				if (timer > 0) {
					setTimeout(() => {
						this.countDown(timer);
					}, 1000)
				}
			},
			openpas(n) {
				if (n == 0) {
					this.pas = !this.pas
				}
				if (n == 1) {
					this.conpas = !this.conpas
				}
			},
			async save() {
				if (!this.captcha) {
					this.$utils.msg(this.$t('login').请输入验证码)
					return;
				}
				if (!this.password) {
					this.$utils.msg(this.$t('set').请输入支付密码)
					return;
				}
				if (this.password.length!=6) {
					this.$utils.msg(this.$t('set').请输入6位数字密码)
					return;
				}
				if (!this.confirmpassword) {
					this.$utils.msg(this.$t('set').请输入支付密码)
					return;
				}
				if (this.confirmpassword.length!=6) {
					this.$utils.msg(this.$t('set').请输入6位数字密码)
					return;
				}
				if (this.password != this.confirmpassword) {
					this.$utils.msg(this.$t('set').两次密码输入不一致)
					return;
				}
				const res = await this.$api.setpaypassword({
					captcha: this.captcha,
					pwd: this.password,
					area_code: this.code
				})
				if (res && res.code == 1) {
					this.$store.dispatch('getuserInfo')
					setTimeout(() => {
						this.navTo('/pages/setting/setSuccess')
					}, 500)
				}

			}
		}
	}
</script>

<style>

</style>